import {Button, Card, Divider, Layout, Space} from "antd";
import {useModel} from "@@/exports";
import {useEffect, useState} from "react";
import {createPermissionsUsingPOST, getPermissionsUsingPOST} from "@/services/yuapi-backend/userController";

const { Sider, Content } = Layout;

const Center: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const [key, setKey] = useState<API.KeyDTO>({});
  const currentUser=initialState?.loginUser;

  const getAccessKeyAndSecretKey = async () => {
    try {
      const res=await getPermissionsUsingPOST({userId: currentUser?.id} as API.getPermissionsUsingPOSTParams);
      if (res.code === 0) {
        setKey(res.data as API.KeyDTO);
      }
    }catch (error) {
      console.log(error);
    }
  }

  const createAccessKeyAndSecretKey = async () => {
    try {
      const res=await createPermissionsUsingPOST({userId: currentUser?.id} as API.getPermissionsUsingPOSTParams);
      if (res.code === 0) {
        //刷新
        window.location.reload();
      }
    }catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {
    getAccessKeyAndSecretKey();
  },[])

  return (
    <Layout>
      <Sider width="25%">
        <Card title="用户信息" style={{height: '100%'}}>
          <p>用户名：{currentUser?.userName}</p>
          <p>权限：{currentUser?.userRole}</p>
        </Card>
      </Sider>
      <Divider type={'vertical'}/>
      <Content>
        <Card title="令牌" style={{height: '100%'}}>
          <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
            <Button type="primary" onClick={createAccessKeyAndSecretKey}>获取令牌</Button>
            <p>accessKey：{key?.accessKey}</p>
            <p>secretKey: {key?.secretKey}</p>
          </Space>
        </Card>
      </Content>
    </Layout>
  );
}

export default Center;
